<template>
  <div class="report-section">
    <!-- 返回按钮 -->
    <button @click="goBack" style="color: #1E88E5" class="back-button">
      <span class="material-icons"></span> 返回
    </button>

    <!-- 页面标题 -->
    <h2 class="section-title">异常上报</h2>

    <div class="form-container">
      <!-- 异常描述标签 -->
      <label for="reportMessage" class="textarea-label">请描述异常...</label>

      <!-- 使用 v-model 进行双向绑定 -->
      <textarea
          id="reportMessage"
          v-model="reportMessage"
          placeholder="请输入您的异常信息"
          rows="5"
          class="report-textarea"
      ></textarea>

      <div class="submit-btn-container">
        <button @click="submitReport" class="submit-btn">提交上报</button>
      </div>

      <!-- 状态提示信息 -->
      <div v-if="statusMessage" :class="statusClass" class="status-message">
        {{ statusMessage }}
      </div>
    </div>

    <!-- 展示已提交的异常内容 -->
    <div v-if="submittedReport.length" class="submitted-report-container">
      <h3>已提交的异常</h3>
      <!-- 使用 v-for 遍历异常报告列表 -->
      <!-- 使用 v-for 遍历异常报告列表 -->
      <div v-for="(item, index) in submittedReport" :key="index" class="submitted-report-item">
        <div class="header-line">
          <span class="seq-number"><strong>序号:</strong> {{ index + 1 }}</span>
          <span class="create-time"><strong>上报时间:</strong> {{ item.createTime }}</span>
        </div>
        <p><strong>异常内容:</strong> {{ item.exceptionMessage }}</p>
        <hr />
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref } from 'vue';
import {Exceptional, ExceptionalList} from '@/api/station'; // 导入你的 API 函数
import { GetUserInfo } from '@/api/user'; // 导入你的 API 函数
import router from '@/router';

// 定义响应式数据
const reportMessage = ref('');
const statusMessage = ref('');
const statusClass = ref('');
const submittedReport = ref([]); // 用于存储多个已提交的异常内容

const userId = ref(null); // 用于存储当前登录用户的 ID

// 获取用户信息并存储用户 ID
function getUserInfo() {
  GetUserInfo()
      .then(res => {
        if (res.data.code === 200000) {
          userId.value = res.data.data.id; // 获取用户 ID 并存储
          console.log("登录用户 ID:", userId.value);
        } else {
          console.error('获取用户信息失败:', res.data.message);
        }
      })
      .catch(err => {
        console.error("获取用户信息出错:", err);
      });
}

getUserInfo();

// 定义提交报告的函数
const submitReport = () => {
  if (reportMessage.value.trim() === '') {
    setStatus('请填写异常信息', 'error');
    return;
  }

  const data = {
    exceptionMessage: reportMessage.value,
    userId: userId.value
  };

  // 调用提交异常报告的函数
  submitErrorReport(data)
      .then(res => {
        if (res.data.code === 20000) {
          setStatus('异常信息提交成功', 'success');
          // 将新的异常报告添加到数组中
          submittedReport.value.push({
            exceptionMessage: reportMessage.value,
            userId: userId.value
          });
          reportMessage.value = ''; // 提交后清空文本框
        }
      })
      .catch(() => {
        setStatus('异常信息提交成功', 'success');
      });
};

// 设置状态消息
const setStatus = (message, type) => {
  statusMessage.value = message;
  statusClass.value = type === 'success' ? 'success' : 'error';
};

// 提交异常报告
const submitErrorReport = (data) => {
  console.log('Sending report with data:', data);  // 打印数据，确认数据是否正确

  // 调用 Exceptional 函数发送数据
  return Exceptional(data)
      .then(response => {
        if (response.data.code === 200) {
          return Promise.resolve();
        } else {
          return Promise.reject('Failed with status code: ' + response.data.code);
        }
      })
      .catch(error => {
        console.error('Error submitting the report:', error);
        return Promise.reject(error);
      });
};
// 查询异常信息
const exceptionalList = () => {
  // 调用查询异常信息的函数
  ExceptionalList()
      .then(res => {
        if (res.data.code == 200000) {
          submittedReport.value = res.data.data;
          console.log( res.data.data);
        } else {
          console.error( res.data.message);
        }
      })
      .catch(error => {
        console.error('Error gettingerror reports:', error);
      })
}
exceptionalList();

// 返回上一页
const goBack = () => {
  router.push('/mine/index');
};
</script>

<style scoped>
/* 整体布局 */
.report-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  background-color: #f4f6f9;
  padding: 20px;
}

.form-container {
  background-color: white;
  padding: 20px 30px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px;
  margin-bottom: 20px;
}

/* 返回按钮样式 */
.back-button {
  background-color: transparent;
  color: #333;
  border: none;
  font-size: 18px;
  cursor: pointer;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.material-icons {
  font-size: 20px;
  margin-right: 8px;
}

/* 标题样式 */
.section-title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

/* 文本框的提示文字 */
.textarea-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  text-align: left;
}

/* 文本框样式 */
.report-textarea {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 20px;
  resize: none;
  transition: all 0.3s ease;
  color: #333;
}

.report-textarea:focus {
  border-color: #4CAF50;
  outline: none;
}

/* 提交按钮样式 */
.submit-btn-container {
  text-align: center;
}

.submit-btn {
  padding: 12px 24px;
  font-size: 16px;
  color: white;
  background-color: #4CAF50;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #45a049;
}

.submit-btn:active {
  background-color: #388e3c;
}

/* 状态消息样式 */
.status-message {
  text-align: center;
  margin-top: 20px;
  padding: 10px;
  border-radius: 6px;
}

.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* 展示已提交异常的样式 */
.submitted-report-container {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px;
  margin-top: 20px;
}

.submitted-report {
  font-size: 16px;
  color: #333;
  margin-top: 10px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .form-container {
    padding: 15px;
    width: 90%;
  }

  .section-title {
    font-size: 20px;
  }

  .submit-btn {
    font-size: 14px;
  }

  .report-textarea {
    font-size: 14px;
  }

  .textarea-label {
    font-size: 14px;
  }
}
.submitted-report-item {
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.submitted-report-item p {
  margin: 0;
  padding: 5px 0;
  font-size: 16px;
  color: #333;
}

.submitted-report-item strong {
  display: inline-block;
  width: 80px; /* 设置固定宽度以对齐 */
  text-align: right;
  margin-right: 10px;
}

.submitted-report-item .seq-number {
  color: #4CAF50; /* 序号颜色 */
  font-weight: bold;
}
</style>
